<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<headassy title="备件审批" :isSearch="false" :isTab="false" :tabs='[]'></headassy>
	<view class="process-content">
		<view class="u-flex top mb-10">
			<view class="">
				申请类型:
			</view>
			<view class="radio">
				<u-radio-group active-color="#fd7400" disabled icon-size="36"
					style="display: flex;justify-content: space-around !important;" v-model="radiovalue1"
					class="flex-around">
					<u-radio v-for="(item, index) in radiolist2" :key="index" :label="item.name" :name="item.name">{{item.name}}</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="form" v-for="(val, idx) in SpareInfoData" :key="idx">
			<view class="">
				备件{{idx+1}}
			</view>
			<view class="form-top u-flex-between">
				<view class="">
					备件审核
				</view>
				<u-radio-group active-color="#fd7400" v-model="val.type" icon-size="36"
					style="display: flex;justify-content: space-around;">
					<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.value">{{item.name}}</u-radio>
				</u-radio-group>
			</view>
			<u--form labelPosition="left" ref="uForm" :model="val">
				<u-form-item label="备件名称" borderBottom ref="item1" labelWidth="200rpx">
					<u--input border="none" placeholder="请选择备件名称" v-model="val.partName" disabledColor="#ffffff"
						disabled></u--input>
					<u-icon slot="right" name="arrow-right" @click="show = true"></u-icon>
				</u-form-item>
				<u-form-item label="备件规格" borderBottom ref="item1" labelWidth="200rpx">
					<u--input disabled disabledColor="#ffffff" border="none" v-model="val.partSpec"
						placeholder="请选择备件规格"></u--input>
					<u-icon slot="right" name="arrow-right" @click="show2 = true"></u-icon>
				</u-form-item>
				<u-form-item label="备件数量" borderBottom ref="item1" labelWidth="200rpx">
					<u--input border="none" placeholder="请输入备件数量" v-model="val.quantity"></u--input>
				</u-form-item>
				<u-form-item label="备件发货" borderBottom ref="item1" labelWidth="200rpx">
					<u--input disabled disabledColor="#ffffff" border="none" placeholder="请选择备件发货"
						v-model="val.zjWarehousing.name"></u--input>
					<u-icon slot="right" name="arrow-right" @click="setShow4(idx)"></u-icon>
				</u-form-item>
				<u-form-item label="备件费用" borderBottom ref="item1" labelWidth="200rpx">
					<u--input v-model="val.cost" border="none"></u--input>
				</u-form-item>
				<u-form-item label="附件" borderBottom ref="item1" labelWidth="200rpx">
					<u-upload @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
				</u-form-item>
			</u--form>
		</view>
		<view class="form">
			<u--form labelPosition="left" ref="uForm" :model="processlist">
				<u-form-item label="收货地址类型" borderBottom ref="item1" labelWidth="200rpx">
					<u--input border="none" disabled disabledColor="#ffffff" placeholder="请选择地址类型"
						v-model="WorkSpare.receiptType"></u--input>
					<u-icon slot="right" name="arrow-right" @click="show3 = true"></u-icon>
				</u-form-item>
				<u-form-item label="收货姓名" borderBottom ref="item1" labelWidth="200rpx">
					<u--input disabledColor="#ffffff" border="none" v-model="WorkSpare.receiptName"
						placeholder="请输入收货姓名"></u--input>
				</u-form-item>
				<u-form-item label="收货电话" borderBottom ref="item1" labelWidth="200rpx">
					<u--input disabledColor="#ffffff" border="none" v-model="WorkSpare.receiptPhone"
						placeholder="请输入收货电话"></u--input>
				</u-form-item>
				<u-form-item label="登记地址:" borderBottom ref="item1" labelWidth="200rpx">
					<view @click="addShow1">
						<span class="address-color"
							v-if="WorkSpare.receiptAddressStr">{{WorkSpare.receiptAddressStr}}</span>
						<span class="text-orange" v-else :style="{ color: color || '' }">选择</span>
					</view>
				</u-form-item>
				<u-form-item label="详细地址" borderBottom ref="item1" labelWidth="200rpx">
					<u--input disabledColor="#ffffff" border="none" v-model="WorkSpare.receiptAddressInfo"
						placeholder="请输入详细地址"></u--input>
				</u-form-item>
				<u-form-item label="审核备注" borderBottom ref="item1" labelWidth="200rpx">
					<u--input border="none" v-model="WorkSpare.remark" placeholder="请输入审核备注" ></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="form u-flex-between">
			<view class="">
				旧件回收
			</view>
			<u-radio-group icon-size="36" active-color="#fd7400" v-model="WorkSpare.jjhs" @change="jjhsChange"
				style="justify-content: space-around;">
				<u-radio :name="0">
					就地废弃
				</u-radio>
				<u-radio :name="1">
					旧件退回
				</u-radio>
			</u-radio-group>
		</view>
		<view class="form">
			<u--form labelPosition="left" ref="uForm">
				<u-form-item label="退回仓库" borderBottom ref="item1" labelWidth="200rpx" v-show="WorkSpare.jjhs == 1">
					<u--input disabled disabledColor="#ffffff" border="none" placeholder="请选择退回仓库"
						v-model="WorkSpare.thname"></u--input>
					<u-icon slot="right" name="arrow-right" @click="show5 = true"></u-icon>
				</u-form-item>
				<u-form-item label="收货姓名" borderBottom ref="item1" labelWidth="200rpx" v-show="WorkSpare.jjhs == 1">
					<u--input disabledColor="#ffffff" border="none" v-model="WorkSpare.OldreceiptName"
						placeholder="请输入收货姓名"></u--input>
				</u-form-item>
				<u-form-item label="收货电话" borderBottom ref="item1" labelWidth="200rpx" v-show="WorkSpare.jjhs == 1">
					<u--input disabledColor="#ffffff" border="none" v-model="WorkSpare.OldreceiptPhone"
						placeholder="请输入收货电话"></u--input>
				</u-form-item>
				<u-form-item label="登记地址:" borderBottom ref="item1" labelWidth="200rpx" v-show="WorkSpare.jjhs == 1">
					<view @click="addShow2">
						<span class="address-color"
							v-if="WorkSpare.OldreceiptAddressStr">{{WorkSpare.OldreceiptAddressStr}}</span>
						<span class="text-orange" v-else :style="{ color: color || '' }">选择</span>
					</view>
				</u-form-item>
				<u-form-item label="详细地址" borderBottom ref="item1" labelWidth="200rpx" v-show="WorkSpare.jjhs == 1">
					<u--input disabledColor="#ffffff" border="none" v-model="WorkSpare.OldreceiptAddressInfo"
						placeholder="请输入详细地址"></u--input>
				</u-form-item>
			</u--form>
			<button class="save-btn" @click="submit" style="margin-top: 15px;">审核</button>
		</view>
		
		<u-picker :show="show" :columns="sparelist" keyName="title" @confirm="confirm"></u-picker>
		<u-picker :show="show2" :columns="SparePartslist" keyName="specName" @confirm="confirm2"></u-picker>
		<u-picker :show="show3" :columns="shdzlx" @confirm="confirm3"></u-picker>
		<u-picker :show="show4" :columns="cklist" @confirm="confirm4" keyName="name"></u-picker>
		<u-picker :show="show5" :columns="thlist" @confirm="confirm5" keyName="name"></u-picker>
		<!-- 省市区弹窗 -->
		<u-popup :show="addressShow" @close="addressClose" @open="addressOpen">
			<view style="width:100vw;height:300px;margin-left:-1px;background-color:#fff;" class="bg-white">
				<select-addr :names="addrnames" @selectAddr="selectAddr"></select-addr>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import SelectAddr from '@/pagesA/pages/components/selectAddr';
	export default {
		components: {
			SelectAddr
			// SelectAddr(resolve) {
			// 	require(['@/pagesA/components/selectAddr'], resolve);
			// },
		},
		data() {
			return {
				show: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				radiovalue1: '',
				color: '', //跳转过来的背景颜色
				workId: '',
				custAccId: '',
				applyId: '',
				processlist: {
					processname: '',
					processgg: '',
					processnum: '',
					processmoney: '',
					value: '',
				},
				WorkSpare: {},
				sparelist: [],
				addressShow: false, //选择联系地址
				addrnames: ['省份', '城市', '县/区', '城镇'],
				SpareInfoData: [],
				SparePartslist: [],
				bzvalue: '',
				spareId: '',
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				radiolist1: [{
						name: '同意',
						value: 0,
						disabled: false
					},
					{
						name: '驳回',
						value: 1,
						disabled: false
					},

				],
				radiolist2: [{
						name: '厂家备件',
						value: 0,
						disabled: false
					},
					{
						name: '自购备件',
						value: 1,
						disabled: false
					},

				],
				radiovalue1: '同意',
				radiovalue2: '',
				shdzlx: [
					['新的地址', '用户地址', '网点地址']
				],
				cklist: [],
				thlist: [],
				showIdx: -1,
				
				popShow: false,			// 禁止穿透
				system: uni.getSystemInfoSync(),
			}
		},
		onLoad(e) {
		
			this.workId = e.workId
			this.applyId = e.id
			this.custAccId = uni.getStorageSync('custAccid')
			this.acId = uni.getStorageSync('acId')
		
			this.get_SpareSelect()
			
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				
				this.get_SpareSelect()
				
			},
			// 搜索备件
			async get_SpareSelect() {
				const res = await uni.$api.work.getSpareSelect({
					workId: this.workId,
					custAccId: this.custAccId
				})
				this.sparelist.push(res.data.dataList)
				this.get_WorkSpare()
			},
			// 查询备件记录
			async get_WorkSpare() {
				const res = await uni.$api.work.getWorkSpare({
					workId: this.workId
				})
				this.WorkSpare = res.data[0];
				this.WorkSpare.receiptAddressArr = this.WorkSpare.receiptAddress.split('、');
				let arr = this.WorkSpare.receiptAddressArr[2].split('-');
				this.WorkSpare.receiptAddressStr = arr[0] + '-' + arr[1] + '-' + arr[2] + '-' + arr[3];
				this.WorkSpare.receiptAddressInfo = arr[4];
				this.WorkSpare.jjhs = 0;
				this.radiovalue1 = res.data[0].applyType
				this.find_CheckSpareInfo()
			},
			// 查询备件
			async find_CheckSpareInfo() {
				const res = await uni.$api.spare.findCheckSpareInfo({
					applyId: this.applyId,
				})
				this.SpareInfoData = res.data
				this.SpareInfoData.forEach((i, s) => {
					i.zjWarehousing = {
						name: ''
					}
					this.findWarehousing(s, i.partName, i.partSpec);
				})
				uni.stopPullDownRefresh()
			},
			// 查备件仓库,需要选择备件规格
			async findWarehousing(idx, spareName, spec) {
				const res = await uni.$api.work.findWarehousing({
					spareName: spareName, //备件名称
					spec: spec //备件规格
				}, this.custAccId)
				this.SpareInfoData[idx].cklist = res.data;
				this.SpareInfoData[idx].zjWarehousing = res.data[0];
				this.thlist = [res.data];
				this.$forceUpdate();
				console.log('备件仓库', idx, this.SpareInfoData)
			},
			address() {
				this.show2 = true
				console.log(111)
			},
			
			// chaxun备件规格
			async getSpareParts(id) {
				const res = await uni.$api.spare.getSpareParts({
					spareId: id
				})
				this.SparePartslist.push(res.data)
				console.log(this.SparePartslist, '备件规格,选择完备件名称才会出现的备件规格')
			},
			setShow4(idx) {
				// this.cklist = this.SpareInfoData[idx].cklist;
				this.cklist = [this.SpareInfoData[idx].cklist]
				this.show4 = true;
				this.showIdx = idx;
				console.log('this.cklist', this.cklist)
			},
			// 
			confirm(e) {
				console.log(e)
				// this.spareId=e.value[0].id
				this.show = false
				this.getSpareParts(e.value[0].id)
			},
			confirm2(e) {
				console.log(e)
				this.show2 = false
			},
			async confirm3(e) {
				console.log(e)
				this.show3 = false
				this.WorkSpare.receiptType = e.value[0]
				switch (e.value[0]) {
					case '用户地址':
						const res = await uni.$api.spare.findUserAddr({
							workId: this.workId
						})
						this.WorkSpare.receiptPhone = res.data.phone
						this.WorkSpare.receiptName = res.data.name
						this.WorkSpare.receiptAddressStr = res.data.address
						console.log(res, '用户地址')
						break;
					case '新的地址':
						
						this.WorkSpare.receiptPhone = ''
						this.WorkSpare.receiptName = ''
						this.WorkSpare.receiptAddressStr = ''
						this.WorkSpare.receiptAddressInfo = ''
						break;
						case '网点地址':
							const res2 = await uni.$api.spare.findNetAddr({
								workId: this.workId
							})
							this.WorkSpare.receiptPhone = res2.data.netAddr.phone
							this.WorkSpare.receiptName = res2.data.netAddr.name
							this.WorkSpare.receiptAddressStr = res2.data.netAddr.province + '-'+res2.data.netAddr.city+ '-'+res2.data.netAddr.area
							this.WorkSpare.receiptAddressInfo=res2.data.netAddr.address
							console.log(res2, '网点地址')
							break;
					default:
						break;
				}
			},
			confirm4(e) {
				this.show4 = false
				this.SpareInfoData[this.showIdx].zjWarehousing = e.value[0];
				console.log(e, this.SpareInfoData[this.showIdx])
			},
			confirm5(e) {
				this.show5 = false
				this.WorkSpare.thinfo = e.value[0];
				this.WorkSpare.thname = this.WorkSpare.thinfo.name;
			},
			addressClose() {
				this.addressShow = false;
			},
			addressOpen() {

			},
			selectAddr(value) {
				if (this.addCallType == 1) {
					this.WorkSpare.receiptAddressStr = value.join('-')
				} else {
					this.WorkSpare.OldreceiptAddressStr = value.join('-')
				}
				console.log('选择地址', value)
				this.addressShow = false;
			},
			addShow1() {
				this.addCallType = 1;
				this.addressShow = true;
			},
			addShow2() {
				this.addCallType = 2;
				this.addressShow = true;
			},
			jjhsChange(e) {
				this.WorkSpare.jjhs = e;
				this.$forceUpdate();
			},
			async submit() {
				let data = {
					"spareList": this.SpareInfoData.map(i => {
						return {
							"id": i.id, //审核前返回的数据id
							"partId": i.partId, //工单备件id
							"partName": i.partName, //型号
							"partSpec": i.partSpec, //规格
							"partSku": i.partSku, //sku
							"cost": i.cost, //金额
							"quantity": i.quantity //数量
						}
					}),
					"isCheck": true, //true:审核   false：保存
					"zjWorkSpareReview": {
						"custAccId": this.custAccId, //
						"workId": this.WorkSpare.workId, //工单id
						"applyId": this.applyId, //申请表id
						"oidMethod": this.WorkSpare.jjhs == 1 ? "旧件退回" : "就地废弃", //类型  就地废弃or旧件退回
						"receiptType": this.WorkSpare.OldreceiptType, //用户地址，新的地址 ，网点地址
						"oidRecipient": this.WorkSpare.OldreceiptName, //收件人   //旧件退回传
						"oidPhone": this.WorkSpare.OldreceiptPhone, //手机  旧件退回传
						"oidAddress": this.WorkSpare.OldreceiptAddressStr + '-' + this.WorkSpare
							.OldreceiptAddressInfo, //地址  旧件退回传
						"reviewRemark": this.WorkSpare.remark, //审核备注
						"storageId": this.WorkSpare.thinfo ? this.WorkSpare.thinfo.id : null //  旧件退回的仓库id
					},
					"pass": this.SpareInfoData.filter(i => i.type == 0).map(i => {
						return {
							"partId": i.partId, //工单备件id
							"partName": [
								i.partName, //备件名称型号
								i.partSku, //规格
								`${i.id}、${i.partSku}、${i.partId}、${i.partSku}` // 工单备件id  sku  、PPCP005、43098、PPCP005
							],
							"quantity": i.quantity, //数量
							"cost": i.cost, //金额
							"annex": i.annex //图片附件
						}
					}),
					"notPass": this.SpareInfoData.filter(i => i.type == 1).map(i => {
						return {
							"partId": i.partId, //工单备件id
							"partName": [
								i.partName, //备件名称型号
								i.partSku, //规格
								`${i.id}、${i.partSku}、${i.partId}、${i.partSku}` // 工单备件id  sku  、PPCP005、43098、PPCP005
							],
							"quantity": i.quantity, //数量
							"cost": i.cost, //金额
							"annex": i.annex //图片附件
						}
					}), //驳回数据
					"zjWarehousing": this.SpareInfoData.map(i => {
						return {
							"id": i.zjWarehousing.id,
							"name": i.zjWarehousing.name
						}
					}),
					"acId": this.acId, //登录账号id
					"receiptPhone": this.WorkSpare.receiptPhone, // 手机
					"receiptName": this.WorkSpare.receiptName, //名称
					"receiptType": this.WorkSpare.receiptType, //收货地址类型:
					"networkId": this.WorkSpare.networkId, //网点id
					"customerId": this.WorkSpare.customerId, //客户id，备件记录有返回
					"receiptAddress": this.WorkSpare.receiptAddressStr + '-' + this.WorkSpare
						.receiptAddressInfo //地址
				}
				const res = await uni.$api.spare.checkSpare(data)
				if (res.code === 0) {
					uni.showToast({
						title: res.msg
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			}

		}
	}
</script>

<style lang="scss">
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	.flex-around {
		justify-content: space-around;
	}

	.save-btn {
		background-color: #fd7400;
		color: #fff;
		height: 50px;
		font-size: 16px;
		border-radius: 4rpx;
		line-height: 50px;
	}

	.address-color {
		color: #505050;
	}

	.process-content {
		background-color: #f5f5f5;
		padding: 20rpx;

		/deep/.u-radio__icon-wrap {
			width: 48rpx !important;
			height: 48rpx !important;
		}
		/deep/.u-radio-group--row {
			justify-content: flex-end;
		}
		/deep/.u-radio {
			margin-right: 10rpx;
		}

		.top {
			padding: 30rpx 38rpx 28rpx 0;
			padding-left: 32rpx;
			background: $uni-bg-color;
		}

		.radio {
			flex: 1;
		}

		.form {
			background: $uni-bg-color;
			padding: 15px;

			.form-top {
				padding: 30rpx 0 28rpx 0;
				border-bottom: 1px solid #f5f5f5;
			}


		}

		.add {
			background-color: #f5f5f5;
			padding: 30rpx 38rpx 28rpx 0;
			padding-left: 32rpx;
		}
	}
</style>